<!--UI框架参考vuetify：https://vuetifyjs.com/zh-Hans/-->
<template>
  <v-container style="background-color: #B9F6CA" fluid>
    <v-row>
      <!-- 时钟组件-->
      <v-col cols="3">
        <v-card style=" width: 400px;background-color: transparent" shaped flat>
          <clock/>
        </v-card>
      </v-col>

      <v-col>
        <FClock/>
      </v-col>
      <v-col  cols="1">
        <v-card width="90">
          <v-btn large text width="100%" @click="logout" >
            <v-icon>mdi-logout</v-icon>
          </v-btn>
        </v-card>
      </v-col>
      <v-col class="pa-0" cols="12">
        <!--  地球-->
        <Globe style="height: 800px"/>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import Globe from "@/components/globe";
import Clock from "@/components/clock";
import FClock from "@/components/flipClock/FlipClock"
export default {
  name: 'HelloWorld',
  // eslint-disable-next-line vue/no-unused-components
  components: {Clock, Globe,FClock},
  data: () => ({}),
  methods: {
    logout() {
      this.$router.push('/login')
    }
  }
}
</script>
<style lang="scss">
.test-clock-container {
  font: normal 14px "Helvetica Neue", Helvetica, sans-serif;
  user-select: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  background: radial-gradient(ellipse at center, #969696 0%, #595959 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
</style>
